<template>
  <div class="g-el-demo-block">
    <h3 class="demo-block-title" v-if="title != ''">{{ title }}</h3>
    <p class="demo-block-introduction" v-if="introduction != ''">
      {{ introduction }}
    </p>
    <div
      @mouseout="arrowAnimation ? (hover_animation = false) : null"
      @mouseover="arrowAnimation ? (hover_animation = true) : null"
      class="demo-block"
    >
      <div class="source">
        <slot name="demo" />
      </div>
      <div class="meta" :style="{ maxHeight: code_height + 'px' }" ref="meta">
        <div class="description" v-if="$slots.description">
          <slot name="description" />
        </div>
        <pre v-highlightjs>
          <slot name="code" />
        </pre>
      </div>
      <div @click="showCode()" class="demo-block-control">
        <g-icon v-if="code_height === 0" name="arrow-down"  :class="{hovering_i: hover_animation || !arrowAnimation}"/>
        <span :class="{ hovering_span: hover_animation || !arrowAnimation }">
          {{ code_height === 0 ? "显示代码" : "隐藏代码" }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "g-block-box",
  props: {
    title: {
      type: String,
      default: "",
    },
    introduction: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 100,
    },
    arrowAnimation: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      data: "",
      hover_animation: false,
      code_height: 0
    };
  },
  methods: {
    showCode() {
      if (this.code_height === 0) {
        this.code_height = 2000;
      } else {
        this.code_height = 0;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.g-el-demo-block {
  .demo-block-title {
    margin: 55px 0 20px;
    font-weight: 400;
    color: var(--config-color-text);
  }
  .demo-block-introduction {
    font-size: 14px;
    color: var(--config-color-text-introduction);
    margin: 10px 0;
  }
  .demo-block {
    width: 100%;
    margin-bottom: 24px;
    background: var(--config-color-bar);
    border: 1px solid var(--config-color-border);
    border-radius: 3px;
    transition: 0.2s;
    &:hover {
      box-shadow: 0 0 8px 0 --config-color-shadow,
        0 2px 4px 0 --config-color-shadow;
    }
    .source {
      position: relative;
      padding: 24px;
    }
    .meta {
      height: 100%;
      background: #282c34;
      transition: max-height 0.2s;
      overflow: auto;
      .description {
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #7b7979;
        border-radius: 3px;
        font-size: 14px;
        line-height: 22px;
        color: #fff;
        word-break: break-word;
        margin: 10px;
        background-color: #1d2026;
        p {
          margin: 0;
        }
      }
    }
    .demo-block-control {
      cursor: pointer;
      position: relative;
      margin-top: -1px;
      height: 44px;
      box-sizing: border-box;
      background-color: var(--config-color-control);
      border-top: 1px solid var(--config-color-control-border);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      text-align: center;
      color: var(--config-color-text);
      &:hover {
        color: var(--color-primary);
        background-color: var(--config-color-hover);
      }
      i {
        display: inline-block;
        position: relative;
        font-size: 16px;
        line-height: 44px;
        transition: 0.3s;
      }
      span {
        display: inline-block;
        position: absolute;
        transform: translateX(10px);
        font-size: 14px;
        line-height: 44px;
        transition: 0.3s;
        opacity: 0;
      }
      .hovering_i {
        transform: translateX(-40px);
      }
      .hovering_span {
        transform: translateX(-30px);
        opacity: 1;
      }
    }
  }
}
</style>
